<template>
  <div class="bg-[var(--el-bg-color)] p-20px box-border h-1/1 w-1/1">
    <div class="flex flex-row">
      <div class="w-350px h-200px">
        <div id="setCoverVideo"></div>
      </div>
      <div class="ml-40px">
        <el-image :src="video ? userInfo.prefix + video.cover : ''" class="w-350px h-200px" fit="fill">
          <template #error>
            <div
              @click="openSuCaiKu"
              class="flex flex-col w-1/1 justify-center h-1/1 border border-dashed border-[#e0e0e0] border-[2px] cursor-pointer"
            >
              <div>
                <div class="text-center">
                  <el-icon class="text-center" size="40" color="#e6e6e6"><Plus /></el-icon>
                </div>
                <div class="text-center">从素材库中选择</div>
              </div>
            </div>
          </template>
        </el-image>
        <div>
          <el-button size="small" v-if="video ? (video.cover ? true : false) : false" @click="openSuCaiKu">重新选择</el-button>
        </div>
      </div>
    </div>

    <div class="mt-30px">视频截图</div>
    <div class="mt-10px">
      <div class="inline-block cover" v-for="(p, index) in coverList" :key="index">
        <el-image :src="userInfo.prefix + p" class="w-150px cursor-pointer h-1/1 align-bottom" fit="fill"></el-image>
        <div class="cover-opera text-center flex flex-col justify-center">
          <el-button size="small" :icon="Setting" type="primary" @click="setCover(p)">设置封面</el-button>
        </div>
      </div>
    </div>
    <div class="mt-30px" type="primary" v-if="coverInfo.filename && coverInfo.url">
      <el-button @click="confirmCover" type="primary">确定封面</el-button>
    </div>
    <SuCaiPopup mode="select" filter="image" ref="suCaiRef" @get-url="getUrl"></SuCaiPopup>
  </div>
</template>

<script setup lang="ts">
import { getSingleFile } from "@/api/modules/file";
import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import player from "xgplayer";
import { Plus, Setting } from "@element-plus/icons-vue";
import "xgplayer/dist/index.min.css";
import SuCaiPopup from "@/components/sucaiPopup/index.vue";
import md5 from "js-md5";
import { generateUUID } from "@/utils";
import { setCover as setCoverApi } from "@/api/modules/file";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/stores/modules/user";

const { userInfo } = useUserStore();

const route = useRoute();
const router = useRouter();

const video = ref();

const play = ref<player>();

const coverInfo = reactive({ id: parseInt(route.query.id as string), url: "", filename: "" });

const coverList = ref<string[]>([]);

const initPlay = () => {
  play.value?.destroy();
  play.value = new player({
    id: "setCoverVideo",
    url: userInfo.prefix + video.value.url,
    playsinline: true,
    width: "100%",
    height: "100%",
    poster: userInfo.prefix + video.value.cover
  });
};

// -------打开素材库
const suCaiRef = ref<InstanceType<typeof SuCaiPopup> | null>();
const openSuCaiKu = () => {
  suCaiRef.value?.acceptParams();
};
const getUrl = async (val: any) => {
  console.log(val);
  video.value.cover = val.url;
  suCaiRef.value?.close();
  // ---设置封面
  const url = userInfo.prefix + val.url;
  play.value?.setConfig({ poster: url });
  coverInfo.filename = md5(generateUUID()) + "." + val.type;
  coverInfo.url = val.url;
  initPlay();
};

onMounted(async () => {
  const { data } = await getSingleFile({ id: route.query.id });
  video.value = data;
  initPlay();
  // 构建封面图
  genCoverList();
});

// ----采用视频截图设置封面图
const setCover = async (p: any) => {
  video.value.cover = p;
  coverInfo.filename = md5(generateUUID()) + ".jpg";
  coverInfo.url = p;
  initPlay();
};

// ---构建封面图
const genCoverList = () => {
  for (let i = 0; i < 10; i++) {
    coverList.value.push(video.value.url + `?x-oss-process=video/snapshot,t_${i * 4000},f_jpg,m_fast`);
  }
};

const confirmCover = async () => {
  try {
    await setCoverApi(coverInfo);
    ElMessage.success("设置封面成功");
    router.back();
  } catch (error) {}
};
</script>

<style lang="scss" scoped>
.cover {
  position: relative;
  .cover-opera {
    position: absolute;
    top: 0;
    width: 0%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(0 0 0 / 30%);
    transition: 0.3s all;
  }
  &:hover .cover-opera {
    width: 100%;
    cursor: pointer;
  }
}
</style>
